<template>
	<view>
		<customHeader>
			<template v-slot:bg>
				<image class="head-bg" src="../../static/image/version/type_bg.png"></image>
			</template>
			<template v-slot:left>
				<view class="locations">
					<image src="../../static/image/version/local.png"></image>
					<text>渝渔速生鲜采购配送一站式平台</text>
					<!-- <view>解放大道站</view> -->
				</view>
			</template>
		</customHeader>
		<view class="boxs-row">
			<view class="set-pad">
				<view class="search-box">
					<image src="../../static/image/version/search.png"></image>
					<!-- <text>海鲜</text> -->
					<input placeholder="海鲜" v-model="searchForm.keywords" @change="searchs"/>
				</view>
				<view class="type-row">
					<view class="scrolls" v-if="!typeLoading">
						<view v-for="(it, ix) in typeList" :key="ix" 
						@click="checkType(it)"
						:class="{'actives': searchForm.p_category_id == it.id}">
							<view class="imgs">
								<image :src="it.icon"></image>
							</view>
							<view class="name">{{ it.name }}</view>
						</view>
					</view>
					<view class="skele-box" v-else>
						<u-skeleton
							rows="2"
							:title="false"
						></u-skeleton>
					</view>
					<view class="actiond" hover-class="hover_class" @click="openAll">
						<view>全部</view>
						<image src="../../static/image/version/types.png"></image>
					</view>
				</view>
			</view>
			<view class="scoll-type">
				<view class="menus">
					<view v-for="(it, ix) in leftMenu" :key="ix" 
					@click="checkLeft(it)"
					:class="{'active': searchForm.category_id === it.id}">
						<text>{{it.name}}</text>
					</view>
				</view>
				<view class="right">
					<view class="search-file">
						<view v-for="(it, ix) in searchFiled" :key="ix"
						 @click="checkOrder(it)"
						 :class="{'activ': searchForm.orderby_field === it.id}">{{it.name}}
							<view v-if="it.id === 'shop_price'">
								<u-icon name="arrow-up-fill" :color="getSort.asc ? '#0B59E0': '#969696'" size="7"></u-icon>
								<u-icon name="arrow-down-fill" :color="getSort.desc ? '#0B59E0': '#969696'" size="7"></u-icon>
							</view>
						</view>
					</view>
					<scroll-view scroll-y class="set-hrig" @scrolltolower="lowerBottom" :throttle="false">
						<view class="scolls" v-if="searchForm.category_id">
							<view class="tips">· {{ getCurrent }} ·</view>
							<view class="list-row" v-if="shopList.length !== 0 && !proLoading">
								<view v-for="(it, ix) in shopList" :key="ix" @click="goDetail(it)">
									<image mode="aspectFill" :src="it.image"></image>
									<view>
										<view :class="{'clear-text': it.isTodaySeckill != 2 && !it.is_buy && it.isXpsj != 2}">
											<view v-if="it.is_buy">买过</view>
											<view v-if="!it.is_buy && it.isTodaySeckill == 2">秒杀</view>
											<view v-if="!it.is_buy && it.isTodaySeckill != 2&& it.isXpsj == 2">新品</view>
											<text>{{ it.name }}</text>
										</view>
										<view class="des">{{ it.describe }}</view>
										<view class="prices">
											<view>
												<text>￥</text>
												<view>{{it.shopPrice || 0}}</view>
											</view>
											<view @click.stop="addCart(it)" hover-class="hover_class">
												<view v-if="it.cartNum" class="add-car">
													<image src="../../static/image/version/add.png"></image>
													<view>{{it.cartNum}}</view>
												</view>
												<image src="../../static/image/version/car.png" v-else></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="proLoading" class="list-row">
								<view class="load-emp" v-for="(it) in 4" :key="it">
									<u-skeleton
										rows="3"
										avatar
										:title="false"
									></u-skeleton>
								</view>
							</view>
							<view v-if="shopList.length === 0 && !proLoading" class="emptyds">
								<empty title="暂无商品信息"/>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<moreType ref="moreType" :typeList="typeList" :check="searchForm.p_category_id" @setCheck="checkType" />
		<rulePop ref="rulePop" @update="getCart" />
	</view>
</template>

<script>
import store from '@/store'
import moreType from './moreType'
import {
	productTypes,
	productList,
	cartList
} from '@/utils/api/home.js'
import rulePop from '@/pages/home/component/rulePop'
export default {
	components: {
		moreType,
		rulePop
	},
	data() {
		return {
			typeList: [],
			leftMenu: [],
			shopList: [],
			searchForm: {
				p_category_id: '',
				category_id: '',
				page: 1,
				keywords: '',
				orderby_field: 'sales_num',
				orderby_type: ''
			},
			shopTotal: 0,
			typeLoading: true,
			proLoading: true,
			searchFiled: [
				{ name: '销量', id: 'sales_num' },
				{ name: '折扣', id: 'discount' },
				{ name: '价格', id: 'shop_price' },
			],
			cartData: []
		}
	},
	computed: {
		getCurrent() {
			let item = this.leftMenu.find((it) => it.id === this.searchForm.category_id) || {}
			return item.name
		},
		getSort() {
			let type = this.searchForm.orderby_type
			return {
				asc: type === 'ASC',
				desc: type === 'DESC',
			}
		}
	},
	onHide() {
		store.commit('setShopId', this.searchForm.p_category_id)
		// store.commit('setShopId', '')
	},
	onLoad() {
		this.getFirstType()
		this.getCart()
	},
	methods: {
		// 上拉加载
		lowerBottom() {
			if(this.shopList.length >= this.shopTotal) return
			this.searchForm.page ++
			this.getProduct('load')
		},
		// 添加购物车
		addCart(item) {
			this.$refs.rulePop.openPop(item)
		},
		// 设置购物数量
		setCartNum() {
			let cartInfo = {} 
			this.cartData.forEach((it) => {
				if(cartInfo[it.product_id]) {
					cartInfo[it.product_id] += 1
				} else {
					cartInfo[it.product_id] = 1
				}
			})
			this.shopList.forEach((it) => {
				if(cartInfo[it.id]) {
					it.cartNum = cartInfo[it.id]
				}
			})
		},
		// 购物车列表
		getCart() {
			cartList().then((res) => {
				this.cartData = res.data || []
				this.setCartNum()
			})
		},
		// 切换一级分类
		checkType(it) {
			this.leftMenu = it.clist || []
			this.searchForm.p_category_id = it.id
			if(this.leftMenu.length) {
				this.searchForm.category_id = this.leftMenu[0].id
			}
			this.searchs()
		},
		// 切换二级
		checkLeft(it) {
			this.searchForm.category_id = it.id
			this.searchs()
		},
		// 排序
		checkOrder(it) {
			this.searchForm.orderby_field = it.id
			if(it.id === 'shop_price') {
				let sorts = ''
				let type = this.searchForm.orderby_type
				if(!type) {
					sorts = 'ASC'
				} else if(type === 'ASC') {
					sorts = 'DESC'
				}
				this.searchForm.orderby_type = sorts
			} else {
				this.searchForm.orderby_type = ''
			}
			this.searchs()
		},
		// 获取分类
		getFirstType() {
			this.typeLoading = true
			productTypes().then((res) => {
				this.typeList = res.data || []
				if(res.data.length) {
					const {id} = res.data[0] || {}
					let clist = res.data[0].clist
					this.searchForm.p_category_id = id
					// 首页跳转
					if(store.state.shopId) {
						let typeItem = this.typeList.find((it) => it.id == store.state.shopId) || {}
						this.searchForm.p_category_id = typeItem.id ? store.state.shopId : id
						clist = typeItem.clist || []
					}
					this.leftMenu = clist
					if(clist.length) {
						this.searchForm.category_id = clist[0].id
						this.getProduct()
					} else {
						this.shopList = []
						this.proLoading = false
					}
				}
			}).finally(() => {
				this.typeLoading = false
			})
		},
		searchs() {
			this.searchForm.page = 1
			this.shopList = []
			this.getProduct()
		},
		// 获取商品
		getProduct(key) {
			if(!key) {
				this.proLoading = true
			} else {
				uni.showLoading({
					title: '加载中'
				})
			}
			productList(this.searchForm).then((res) => {
				this.shopTotal = res.data.total
				if(this.searchForm.page === 1) {
					this.shopList = res.data.list || []
				} else {
					this.shopList = this.shopList.concat(res.data.list)
				}
				this.setCartNum()
				uni.hideLoading()
			}).finally(() => {
				setTimeout(() => {
					this.proLoading = false
				}, 300)
			}).catch(() => {
				this.proLoading = false
			})
		},
		openAll() {
			this.$refs.moreType.openPop()
		},
		goSearch() {
			uni.navigateTo({
				url: '/managePackage/pages/shopSearch/index'
			})
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/managePackage/pages/shopDetail/index?id=' + item.id
			})
		}
	}
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>